<template>
	<view class="box">
		<tito class="tito" title="我的售后" lefticon="left" @clickLeft="clickLeft" />
		<view class="image-pickerDate">
			<view class="image">
				<image src="../static/zhuangshi.png" mode=""></image>
			</view>
			<!-- <view class="pickerDate">
				<picker mode="date" fields="month" :value="date" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="uni-input">{{ date }}</view>
				</picker>
				<uni-icons type="down" size="20" color="#2590FA"></uni-icons>
			</view> -->
		</view>
		<view class="contenList" v-if="aftersalesDate.length > 0">
			<view class="conten" v-for="(item, index) in aftersalesDate" :key="index">
				<view class="text-number">
					<view class="text">
						设备编号
					</view>
					<view class="number">
						{{ item.code }}
					</view>
				</view>
				<view class="text-number">
					<view class="text">
						售后类型
					</view>
					<view class="number">
						{{ ServiceType[item.type] }}
					</view>
				</view>
				<view class="text-number">
					<view class="text">
						售后时间
					</view>
					<view class="number">
						{{ item.createTime }}
					</view>
				</view>
			</view>
		</view>
		<view class="none" v-else>
			暂无更多
		</view>
	</view>
</template>

<script>
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		})
		return {
			date: currentDate,
			aftersalesDate: [],
			page: 1,
			limit: 10,
			ServiceType: {
				1: "水机安装",
				2: "滤芯更换",
				3: "故障报修",
				4: "其他",
			}
		};
	},
	onLoad() {
		this.aftersalesList()
	},
	onReachBottom() {
		this.page++
		this.aftersalesList()
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		},
	},
	methods: {
		//售后列表
		async aftersalesList() {
			let data = {
				yearMonth: this.date, //年月: 如2024-01
				page: this.page, //页
				limit: this.limit, //条
			}
			let res = await this.$request.get("/shop/goodsOrderAftersales/list", data)
			if (res.data.length > 0) {
				console.log(res, '----售后列表----');
				this.aftersalesDate.push(...res.data)
			} else {
				uni.showToast({
					title: "没有更多了！",
					icon: "none"
				})
			}
		},
		clickLeft() {
			uni.navigateBack()
		},
		bindDateChange: function (e) {
			this.date = e.detail.value
			this.page = 1
			this.aftersalesDate = []
			this.aftersalesList()
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 6;
			}
			month = month > 9 ? month : '0' + month;
			return `${year}-${month}`;
		},
	}
}
</script>

<style lang="scss">
.none {
	text-align: center;
	margin-top: 500rpx;
	font-size: 32rpx;
	color: #B1B2B2;
}

.box {
	min-height: 100vh;
	background-color: #F3F5F6;
}

.image-pickerDate {
	margin-top: 32rpx;
	position: relative;

	.image {
		text-align: center;

		image {
			width: 592rpx;
			height: 16rpx;
		}
	}

	.pickerDate {
		margin: -48rpx auto;
		width: 228rpx;
		height: 56rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #2590FA;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 24rpx;
		box-sizing: border-box;

		.uni-input {
			font-size: 28rpx;
			color: #2590FA;
		}
	}
}

.contenList {
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-top: 80rpx;

	.conten {
		height: 216rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx #F0F1F2;
		border-radius: 16rpx;
		padding: 24rpx;
		box-sizing: border-box;
		margin-top: 24rpx;

		.text-number:first-child {
			margin-top: 0rpx;
		}

		.text-number {
			font-size: 28rpx;
			display: flex;
			align-items: center;
			margin-top: 24rpx;

			.text {
				color: #616366;
			}

			.number {
				color: #14171A;
				margin-left: 24rpx;
			}
		}
	}
}
</style>